<html>
    <head>
        <style>
            body {
                font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif
            }
            pre {
                font-family: 'Consolas', 'Monaco', 'ＭＳ ゴシック';
            }
            .readonly {
                -moz-user-modify: read-only;
                -webkit-user-modify: read-only;
            }
            .readwrite {
                -moz-user-modify: read-write;
                -webkit-user-modify: read-write;
            }
            
            #editor {
                padding: 5px;
                border: 1px solid black;
            }
            .kwd { color: blue; }
            .com { color: green; }
            .str { color: brown; }
            
        </style>
        
        <script>
            
            window.onload = function() {
                var eEditor = document.getElementById("editor");
                eEditor.onblur = SyntaxHighlight;
                
                SyntaxHighlight();
            };
            
            var SyntaxHighlight = function() {
                var eEditor = document.getElementById("editor");
                var text = eEditor.innerText;
                text = text.replace(/(".*")/gm, '<span class="str">$1</span>');
                text = text.replace(/(\/\/.*)/gm, '<span class="com">$1</span>');
                text = text.replace(/(\/\*([\s]|.)*\*\/)/mg, '<span class="com">$1</span>');
                
                var preceders = [
                    "var", "return", "break", "case", "delete"
                ];
                
                for (var i=0,len=preceders.length; i<len; ++i) {
                    var target = preceders[i];
                    var regexp = new RegExp("(" + target + ")", 'g');
                    text = text.replace(regexp, '<span class="kwd">$1</span>');
                }
                eEditor.innerHTML = text;
            };
        </script>
    </head>
    <body>
        <h2>user-modify サンプル</h2>
        <section>
            <h3>user-modify Test</h3>
            <div class="readonly">編集できないもん</div>
            <div class="readwrite">編集できちゃうよん♪♪</div>
        </section>
        <section>
            <h3>Editor Test</h3>
            <p>
                ブラー時にハイライトします.
            </p>
            <pre id="editor" class="readwrite">
#include &lt; stdio.h &gt;

/**
 * main 処理
 */
int main() {
    // Hello, world と表示
    printf("Hello, world!");
    return 100;
}
</pre>
        </section>
    </body>
</html>